<template>
  <div class="zz-mode-select">
    <div class="active text-cut">{{ activeItem.title }}</div>
    <ul class="proj-menu-list">
      <li class="proj-menu-list-item" v-for="e in items" :key="e.name">
        <a class="menu-list-item-title" @click="handleClick(e)">{{ e.title }}</a>
      </li>
    </ul>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { getQueryAttr } from '../../../lib/earth.js';
import { switchMode } from '../../../lib/ux/mode.js';

const $items = (function() {
  const disable = true;
  const leaves = true;
  return [
    { name: 'air', key: 'air', icon: 'el-icon-setting', title: '大气', disable },
    { name: 'ocean', key: 'ocean', icon: 'el-icon-setting', title: '海洋', disable },
    { name: 'chem', key: 'chem', icon: 'el-icon-setting', title: '化学污染物', disable },
    { name: 'particulates', key: 'particulates', icon: 'el-icon-setting', title: '颗粒物', disable }
    // { name: 'space', key:"space", icon: 'el-icon-printer', title: '空间', disable },
  ];
})();

export default defineComponent({
  name: 'zz-mode-select',
  components: {},
  props: {
    theme: {
      type: String,
      default: 'light' //dark
    }
  },
  setup(props, context) {},
  data() {
    return {
      items: $items,
      selected: 'air',
      show: false
    };
  },
  computed: {
    activeItem() {
      const xx = $items.filter(e => e.key === this.selected);
      return xx[0];
    }
  },
  watch: {
    selected(val) {
      this.$nextTick(() => {
        switchMode(val);
      });
    }
  },
  mounted() {
    const attr = getQueryAttr();
    this.$nextTick(() => {
      this.selected = attr.mode;
    });
  },
  methods: {
    handleClick(e) {
      this.selected = e.key;
    }
  }
});
</script>

<style lang="less" scoped>
@import '@/assets/styles/variables.less';

.zz-mode-select {
  position: absolute;
  display: flex;
  flex-direction: row;
  height: 2em;
  // padding: 0 10px 0 0;
  color: rgba(255, 255, 255, 0.8);
  & > .active {
    height: 2em;
    line-height: 2em;
    max-width: 7em;
    padding: 0 10px 0 10px;
    background-color: rgba(0, 0, 0, 0.33);
  }
  & > .active,
  .menu-list-item-title {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.8);
    &:hover {
      color: #1890ff;
    }
  }

  ul {
    padding: 0;
    margin: 0;
    border: none;
    list-style: none;
  }
  ul.proj-menu-list {
    opacity: 0;
    visibility: hidden;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;

    transition: all 1000ms;

    & > li.proj-menu-list-item {
      position: relative;
      line-height: 2em;
      padding: 0 15px;
      // margin: 0 1em;
      background-color: rgba(0, 0, 0, 0.6);
    }
  }
  
  &:hover {
    ul.proj-menu-list {
      opacity: 1;
      display: flex;
      visibility: visible;
    }
  }
}
</style>
